<template>
    <div>
        <p>姓名:{{name}}</p>
        <p>年龄:{{age}}</p>
        <p>薪水 {{ job.j1.salary }}</p>
        <button type="button" @click="name+='```'">修改姓名</button>
        <button type="button" @click="age++">修改年龄</button>
        <button type="button" @click="job.j1.salary++">修改薪水</button>
    </div>
    <p> toref解构：{{ torefname }}</p>
    
    </template>
    
    <script setup>
    let otherperson=reactive({
      name:'周杰伦',
      age:18,
      job:{
        j1:{
          salary:1000
        }
      }
    })
    const torefname=toRef(otherperson,'name')
    //解构
      let { name, age, job} = toRefs(otherperson);
    
    
    
    </script>
    
    <style lang="less" scoped>
    body {
        width: 100px;
        height: 100px;
        background: #fff;
    }
    </style>
    <!-- 在hooks实现 
    // src/hooks/useMousePosition.js
    
    在app.vue中引入useMousePosition.js hooks
    import useMousePosition from '../hooks/useMousePosition'
    就可以去掉app.vue中的代码中定于ponit 及相关方法
    -->